* {
  margin: 0;
  padding: 0;
}

.head {
  font-size: 28px;
  padding: 20px 0 20px 0;
}

.el-row {
  margin-bottom: 15px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 5px;
  min-height: 36px;
  padding: 35px;
}

.row-bg {
  padding: 5px 0;
  background-color: #f9fafc;
}

.n_font {
  color: #282c34;
  font-size: 13px;
}

.container {
  height: 100%;
}

.container .f1 .n_title .n_font {
  padding: 7px;
}

.container .f1 .count-gray {
  font-size: 30px;
  line-height: 47px;
  font-weight: 600;
  color: #73879C;
}

.container .f1 .count-red {
  font-size: 30px;
  line-height: 47px;
  font-weight: 600;
  color: #e74c3c;
}

.container .f1 .green {
  color: green;
  font-size: 13px;
  display: inline-block;
}

.container .f1 .red {
  color: red;
  font-size: 13px;
  display: inline-block;
}

.line {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid black;
}

.echart {
  position: relative;
  top: 15px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  width: 100%;
  height: 1000px;
}

#d1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 61%;
  height: 35%;
  background-color: aliceblue;
  border-radius: 4px;
}

#d2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 100%;
  /* background-color: #bdccdd; */
  border-radius: 4px;

}

#d3 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 61%;
  height: 65%;
  border-radius: 4px;
  opacity: 0.6;

}